<template>
  <div
    class="message-component"
    :style="{ justifyContent: message.from == 0 ? 'flex-end' : 'flex-start' }"
  >
    <div v-if="message.type == 4 || message.type == 5" class="wrap-comment">
      <div class="comment">
        {{ message.comment || message.content}}
      </div>
    </div>
    <div v-else class="content">
      <div class="discribe-right" v-if="message.from == 0">
      </div>
      <div class="discribe-left" v-if="message.from == 1">
        <span class="time">{{ message.time | formatDate }}</span>
      </div>
      <div
        v-if="message.type == 0"
        class="wrap"
        :class="message.from == 0 ? 'wrap-right' : 'wrap-left'"
      >
        <div
          class="txt"
          :class="message.from == 0 ? 'txt-right' : 'txt-left'"
          v-html="message.content"
        >
          {{ message.content }}
        </div>
      </div>
      <div
        v-if="message.type == 3"
        class="wrap"
        :class="message.from == 0 ? 'wrap-right' : 'wrap-left'"
      >
        <div class="txt link-cover txt-right">
          <div class="link">
            <div class="link-discrib">{{ message.content }}</div>
            <div class="link-btn" @click="link(message)">点击前往</div>
          </div>
        </div>
      </div>
      <el-image
        v-if="message.type == 1"
        style="width: 100px; height: 100px; border-radius: 8px"
        :src="message.content"
        fit="fill"
        :preview-src-list="[message.content]"
      ></el-image>
    </div>
  </div>
</template>

<script>
export default {
  name: "message-component",
  data() {
    return {
      userUrl: require("/static/images/user.jpg"),
      serviceUrl: require("/static/images/service.jpg"),
    };
  },
  props: {
    message: {
      type: Object,
    },
  },
  filters: {
    timestamp(val) {
      return new Date(val).toLocaleTimeString();
    },
  },
  mounted() {},
  methods: {
    link(message) {
      console.log("message", message);
      window.open(message.toolUrl);
    },
  },
};
</script>

<style lang="scss" scoped>
.message-component {
  display: flex;
  margin: 18px 8px;
}
.content {
  max-width: 376px;
  margin: 0 8px;
  .discribe-left {
    font-size: 12px;
    margin-bottom: 5px;
    text-align: left;
    .name {
      margin: 8px;
    }
  }
  .discribe-right {
    font-size: 12px;
    margin-bottom: 5px;
    text-align: right;
    .name {
      margin: 8px;
    }
  }
}
.wrap {
  &-right {
    text-align: right;
  }
  &-left {
    text-align: left;
  }
}
.txt {
  padding: 8px 15px;
  border-radius: 4px;
  display: inline-block;
  text-align: left;
  word-break: break-word;
  color: #333333;
  &-right {
    background-color: #fbfbfb;
  }
  &-left {
    background-color: #eaf6ff;
  }
}
.link-cover {
  width: 376px;
}
.link {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  .link-discrib {
    padding: 8px 15px;
    border-bottom: 1px solid #e6e6e6;
    text-align: center;
  }
  .link-btn {
    cursor: pointer;
    padding: 10px 0;
    font-size: 14px;
    color: #1f6aff;
    text-align: center;
    font-weight: 600;
  }
}
.wrap-comment {
      width: 100%;
    text-align: center;
  .comment {
    font-size: 12px;
    padding: 5px 10px;
    display: inline-block;
    background: #f2f2f2;
    color: #999;
    border-radius: 20px;
  }
}
</style>